import * as React from 'react';

import Tree from './Tree';

interface IProps {
    showSearch?: boolean;
    showInnerSelectedTitle?: boolean;
    showOuterSelectedTitle?: boolean;
    descriptionTitle?: string;
    showEmptySelected?: boolean;
}

export default class Transfer extends  React.Component<IProps, any> {
    public static defaultProps = {
        showSearch: false,
    };

    constructor() {
        super();
        this.state = {
            showSearch: false,
        };
    }

    public renderEmptySelected() {
        const props = this.props;
        if (props.showEmptySelected) {
            return (
                <div className="empty">
                    <i>图标</i>
                    <span>清空所有选择</span>
                </div>
            );
        }
    }

    public renderDescriptionTitle() {
        const props = this.props;
        if (props.descriptionTitle) {
            return (
                <div className="description">
                    <i>图标</i>
                    <span>{props.descriptionTitle}</span>
                </div>
            );
        }
    }

    public render() {
        const props = this.props;
        return (
           <div className="bricks_transfer">
                {/* 头部内容 */}
               <div className="transfer_head">
                   {this.renderDescriptionTitle()}
                   <div className="head_right">
                        {props.showOuterSelectedTitle ? <span>已选择 ：</span> : null}
                        {this.renderEmptySelected()}
                   </div>
               </div>

               {/* 中间不要内容 */}
               <div>
                   {/* 左 框 */}
                   <div>
                    {/* 搜索框 */}
                    <Tree></Tree>

                   </div>
                   <div></div>
                   {/* 右 框 */}
                   <div>

                   </div>
               </div>

               {/* 底部按钮 */}
               <div>
                   <button>保存</button>
                   <button>取消</button>
               </div>
           </div>
       );

    }

}
